<template>
	<div class="content">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<div class="companyVedioList-page">
			<div class="con-list-div new-block">
				<div v-for="(item,index) in list" :key="index">
					<div class="new-block-item" @click="showVideo(item)">
						<div class="new-img">
							<img :src="item.videoImage" style="width:100%;height:100%;object-fit: contain;" />
						</div>
						<div class="new-info">
							<div class="new-title">{{item.videoTitle}}</div>
							<div class="new-time">
								<img src="https://pic.moresu.com/FvRHG8lTvR-fQsAY7hMspuG2Th-4"
									style="width:20rpx;height:20rpx;margin-right:10rpx">
								<span style="margin-left:10rpx">{{item.createdAt}}</span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div style="padding-bottom:40rpx;padding-top:40rpx">
				<u-loadmore :status="status"></u-loadmore>
			</div>
			<u-popup :show="show2" mode="center"  @close="closePop">
			    <video :src="vidoSrc" v-if="show2"></video>
			</u-popup>
		</div>
	</div>
</template>

<script>
	import {
		getCardListAPI,
	} from '@/config/api.js'
	import store from '@/store';
	const log = require('@/plugins/log.js')
	export default {
		name: 'companyVedioList',
		data() {
			return {
				status: 'loadmore',
				list: [],
				pageNum: 1,
				pageSize: 10,
				count: 0,
				show2:false,
				vidoSrc:'',
				sourceFrom:'',
			}
		},

		async onLoad(options) {
			await this.$onLaunched;
			this.clearData();
			this.getList();
			this.sourceFrom=options.from;
		},

		async onShow() {

		},

		onReachBottom() {
			if (this.list.length >= this.count) {
				this.status = 'nomore';
				return;
			}
			this.pageNum = ++this.pageNum;
			this.getList()
		},


		methods: {
			closePop(){
				this.show2 = false
				this.vidoSrc = ''
			},
			showVideo(item){
				let text='';
				if(this.sourceFrom=='card'){
					text='视频动态&'+item.videoTitle;
					log.info(text);
				}
				if(item){
					this.show2 = true;
					this.vidoSrc = '';
					this.vidoSrc = item.videoUrl;
				}
			},

			//清除数据
			clearData() {
				this.pageNum = 1;
				this.list = [];
				this.status = 'loadmore';
				this.count = 0;
			},
			
			getList() {
				let data = {};
				data.pageSize = 10;
				data.pageNum = this.pageNum;
				this.status = 'loading';
				return getCardListAPI(data).then((res) => {
					this.list = this.list.concat(res.list ? res.list : []);
					this.count = res.count;
					if (this.list.length >= this.count) {
						this.status = 'nomore';
					} else {
						this.status = 'loadmore';
					}
				}).catch(() => {
					this.status = 'loadmore';
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/style/common.scss';

	.companyVedioList-page {

		.new-block {
			margin-bottom: 16rpx;

			.new-block-item {
				padding: 24rpx;
				background: #fff;
				border-bottom: 1px solid #eee;
				@include flexbox(flex-start, center);

				.new-img {
					width: 282rpx;
					height: 158rpx;
					border-radius: 18rpx;
					overflow: hidden;
					border: 1px solid #eee
				}

				.new-info {
					padding-left: 18rpx;
					width: calc(100% - 282rpx);

					.new-title {
						font-size: 26rpx;
						color: #000000;
						@include textoverflow(1)
					}

					.new-time {
						@include flexbox(flex-start, center);
						font-size: 26rpx;
						color: #8B8B8B;
						margin-top: 12rpx;
					}
				}
			}

			.new-block-item:last-child {
				border-bottom: 0
			}
		}
	}
</style>